<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-05 09:49:05
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:01:18
 * @FilePath: \kgantt\core\components\grid\GridBody.vue
 * @Description: 
-->
<template>
  <g class="kgantt-gridBody">
    <g class="kgantt-rows">
      <rect
        v-for="(task, index) in tasks"
        :key="'Row' + task.id"
        :x="0"
        :y="index * rowHeight"
        :width="svgWidth"
        :height="rowHeight"
        class="kgantt-gridRow"
      />
    </g>
    <g class="kgantt-rowLines">
      <line
        key="RowLineFirst"
        x="0"
        y1="0"
        :x2="svgWidth"
        y2="0"
        class="kgantt-gridRowLine"
      />
      <line
        v-for="(task, index) in tasks"
        :key="'RowLine' + task.id"
        x="0"
        :y1="(index + 1) * rowHeight"
        :x2="svgWidth"
        :y2="(index + 1) * rowHeight"
        class="kgantt-gridRowLine"
      />
    </g>
    <g class="kgantt-ticks">
      <line
        v-for="(date, index) in dates"
        :key="date.getTime()"
        :x1="index * columnWidth"
        y1="0"
        :x2="index * columnWidth"
        :y2="(tasks.length - 1) * rowHeight"
        class="kgantt-gridTick"
      />
    </g>
    <g class="kgantt-today">
      <rect
        :x="nowTaskRect.x"
        :y="nowTaskRect.y"
        :width="nowTaskRect.width"
        :height="nowTaskRect.height"
        :fill="nowTaskRect.fill"
      />
    </g>
  </g>
</template>
<script lang="ts" setup>
import { addToDate } from "../../helpers/dateHelper";
import { onMounted, PropType, ref, watch } from "vue";
import { Task } from "../../types/publicTypes";
const props = defineProps({
  tasks: {
    type: Array as PropType<Task[]>,
    default: () => [],
  },
  dates: {
    type: Array as PropType<Date[]>,
    default: () => [],
  },
  svgWidth: {
    type: Number,
    default: 0,
  },
  rowHeight: {
    type: Number,
    default: 0,
  },
  columnWidth: {
    type: Number,
    default: 0,
  },
  todayColor: {
    type: String,
    default: "",
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
const defaultTaskRect = {
  x: 0,
  y: 0,
  width: props.columnWidth,
  height: (props.tasks.length - 1) * props.rowHeight,
  fill: props.todayColor,
};
const nowTaskRect = ref(defaultTaskRect);
const initData = () => {
  const now = new Date();
  for (let i = 0; i < props.dates.length; i++) {
    const date = props.dates[i];
    if (
      (i + 1 !== props.dates.length &&
        date.getTime() < now.getTime() &&
        props.dates[i + 1].getTime() >= now.getTime()) ||
      // if current date is last
      (i !== 0 &&
        i + 1 === props.dates.length &&
        date.getTime() < now.getTime() &&
        addToDate(
          date,
          date.getTime() - props.dates[i - 1].getTime(),
          "millisecond"
        ).getTime() >= now.getTime())
    ) {
      nowTaskRect.value = {
        x: i * props.columnWidth,
        y: 0,
        width: props.columnWidth,
        height: (props.tasks.length) * props.rowHeight,
        fill: props.todayColor,
      };
    }
    // rtl for today
    if (
      props.rtl &&
      i + 1 !== props.dates.length &&
      date.getTime() >= now.getTime() &&
      props.dates[i + 1].getTime() < now.getTime()
    ) {
      nowTaskRect.value = {
        x: (i + 1) * props.columnWidth,
        y: 0,
        width: props.columnWidth,
        height: (props.tasks.length) * props.rowHeight,
        fill: props.todayColor,
      };
    }
  }
};
watch(
  () => props.svgWidth,
  () => {
    initData();
  }
);
onMounted(() => {
  initData();
});
</script>